<template>
  <div class="monitor-container">
    <!-- 左侧站点列表 -->
    <div class="site-list-panel">
      <div class="panel-header">
        <h3>监控站点</h3>
        <el-button type="primary" size="small" @click="refreshSites">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
      
      <div class="site-tree">
        <el-tree
          :data="treeData"
          :props="treeProps"
          :default-expand-all="true"
          node-key="id"
          :highlight-current="true"
          @node-click="handleNodeClick"
          class="monitor-tree"
        >
          <template #default="{ node, data }">
            <div class="tree-node">
              <div class="node-content">
                <el-icon v-if="data.type === 'site'" class="node-icon">
                  <Location />
                </el-icon>
                <el-icon v-else class="node-icon">
                  <VideoCamera />
                </el-icon>
                <span class="node-label">{{ data.name }}</span>
                <div class="node-status" v-if="data.type === 'camera'">
                  <el-tag :type="data.status === 'online' ? 'success' : 'danger'" size="small">
                    {{ data.status === 'online' ? '在线' : '离线' }}
                  </el-tag>
                </div>
              </div>
        </div>
      </template>
        </el-tree>
      </div>
    </div>

    <!-- 中间监控预览区域 -->
    <div class="monitor-preview-panel">
      <div class="panel-header">
        <h3>{{ selectedCamera?.name || '请选择监控摄像头' }}</h3>
        <div class="preview-controls" v-if="selectedCamera">
          <el-button-group>
            <el-button size="small" @click="switchLayout('single')" :type="layout === 'single' ? 'primary' : ''">单屏</el-button>
            <el-button size="small" @click="switchLayout('grid')" :type="layout === 'grid' ? 'primary' : ''">网格</el-button>
            <el-button size="small" @click="switchLayout('fullscreen')" :type="layout === 'fullscreen' ? 'primary' : ''">全屏</el-button>
          </el-button-group>
        </div>
      </div>

      <div class="preview-container" :class="layoutClass">
        <!-- 单屏模式 - 显示选中的摄像头 -->
        <div v-if="layout === 'single' && selectedCamera" class="camera-preview single">
          <div class="video-container">
            <div class="video-placeholder">
              <el-icon size="64" color="#909399">
                <VideoCamera />
              </el-icon>
              <p class="camera-title">{{ selectedCamera.name }}</p>
              <p class="video-status">{{ selectedCamera.status === 'online' ? '实时画面' : '连接中...' }}</p>
              <div class="video-info">
                <span>分辨率: 1920x1080</span>
                <span>帧率: 25fps</span>
                <span>码率: 2Mbps</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 网格模式 - 显示当前站点的所有摄像头 -->
        <div v-else-if="layout === 'grid' && selectedSite" class="grid-container">
          <div 
            v-for="camera in selectedSite.cameras" 
            :key="camera.id"
            class="camera-preview grid"
            :class="{ 'selected': selectedCamera?.id === camera.id }"
            @click="selectCamera(camera)"
          >
            <div class="camera-header">
              <span class="camera-name">{{ camera.name }}</span>
              <el-tag :type="camera.status === 'online' ? 'success' : 'danger'" size="small">
                {{ camera.status === 'online' ? '在线' : '离线' }}
              </el-tag>
            </div>
            <div class="video-container">
              <div class="video-placeholder">
                <el-icon size="32" color="#909399">
                  <VideoCamera />
                </el-icon>
                <p>{{ camera.name }}</p>
                <p class="video-status">{{ camera.status === 'online' ? '实时画面' : '连接中...' }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 全屏模式 - 显示选中的摄像头全屏 -->
        <div v-else-if="layout === 'fullscreen' && selectedCamera" class="camera-preview fullscreen">
          <div class="video-container">
            <div class="video-placeholder">
              <el-icon size="96" color="#909399">
                <VideoCamera />
              </el-icon>
              <p class="camera-title">{{ selectedCamera.name }}</p>
              <p class="video-status">{{ selectedCamera.status === 'online' ? '实时画面' : '连接中...' }}</p>
              <div class="video-info">
                <span>分辨率: 1920x1080</span>
                <span>帧率: 25fps</span>
                <span>码率: 2Mbps</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 默认状态 -->
        <div v-else class="empty-state">
          <el-icon size="64" color="#c0c4cc">
            <VideoCamera />
          </el-icon>
          <p>请从左侧选择监控摄像头</p>
        </div>
      </div>
    </div>

    <!-- 右侧操作区域 -->
    <div class="control-panel">
      <div class="panel-header">
        <h3>监控操作</h3>
      </div>

      <!-- 摄像头控制 -->
      <div class="control-section" v-if="selectedCamera">
        <h4>摄像头控制</h4>
        <div class="control-group">
          <label>摄像头：{{ selectedCamera.name }}</label>
          <div class="ptz-controls">
            <div class="ptz-buttons">
              <el-button @click="ptzControl('up')" class="ptz-btn up">
                <el-icon><ArrowUp /></el-icon>
              </el-button>
              <div class="ptz-row">
                <el-button @click="ptzControl('left')" class="ptz-btn left">
                  <el-icon><ArrowLeft /></el-icon>
                </el-button>
                <el-button @click="ptzControl('home')" class="ptz-btn center">
                  <el-icon><House /></el-icon>
                </el-button>
                <el-button @click="ptzControl('right')" class="ptz-btn right">
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
              <el-button @click="ptzControl('down')" class="ptz-btn down">
                <el-icon><ArrowDown /></el-icon>
              </el-button>
            </div>
          </div>
          
          <div class="zoom-controls">
            <el-button @click="zoomControl('in')" size="small">放大</el-button>
            <el-button @click="zoomControl('out')" size="small">缩小</el-button>
          </div>
        </div>
      </div>

      <!-- 录像控制 -->
      <div class="control-section" v-if="selectedCamera">
        <h4>录像控制</h4>
        <div class="control-group">
          <el-button 
            :type="isRecording ? 'danger' : 'success'" 
            @click="toggleRecording"
            :loading="recordingLoading"
          >
            <el-icon><VideoPlay v-if="!isRecording" /><VideoPause v-else /></el-icon>
            {{ isRecording ? '停止录像' : '开始录像' }}
          </el-button>
          <el-button @click="takeSnapshot" size="small">
            <el-icon><Camera /></el-icon>
            截图
          </el-button>
        </div>
      </div>

      <!-- 监控状态 -->
      <div class="control-section">
        <h4>监控状态</h4>
        <div class="status-list">
          <div class="status-item">
            <span class="status-label">系统状态：</span>
            <el-tag type="success">正常</el-tag>
          </div>
          <div class="status-item">
            <span class="status-label">在线设备：</span>
            <span class="status-value">{{ onlineDevices }}/{{ totalDevices }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">存储空间：</span>
            <span class="status-value">{{ storageUsage }}%</span>
          </div>
          <div class="status-item">
            <span class="status-label">网络状态：</span>
            <el-tag type="success">良好</el-tag>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="control-section">
        <h4>快速操作</h4>
        <div class="quick-actions">
          <el-button @click="openAlarmSettings" size="small" type="warning">
            <el-icon><Warning /></el-icon>
            告警设置
          </el-button>
          <el-button @click="openHistory" size="small">
            <el-icon><Clock /></el-icon>
            历史回放
          </el-button>
          <el-button @click="exportData" size="small">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </div>
      </div>
      </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const sites = ref([
  {
    id: 1,
    name: '主井口监控点',
    location: '主井口区域',
    status: 'online',
    cameraCount: 4,
    cameras: [
      { id: 1, name: '主井口-01', status: 'online' },
      { id: 2, name: '主井口-02', status: 'online' },
      { id: 3, name: '主井口-03', status: 'online' },
      { id: 4, name: '主井口-04', status: 'offline' }
    ]
  },
  {
    id: 2,
    name: '副井口监控点',
    location: '副井口区域',
    status: 'online',
    cameraCount: 3,
    cameras: [
      { id: 5, name: '副井口-01', status: 'online' },
      { id: 6, name: '副井口-02', status: 'online' },
      { id: 7, name: '副井口-03', status: 'online' }
    ]
  },
  {
    id: 3,
    name: '井下作业区',
    location: '井下-500m',
    status: 'offline',
    cameraCount: 2,
    cameras: [
      { id: 8, name: '井下-01', status: 'offline' },
      { id: 9, name: '井下-02', status: 'offline' }
    ]
  },
  {
    id: 4,
    name: '地面运输区',
    location: '地面运输线',
    status: 'online',
    cameraCount: 5,
    cameras: [
      { id: 10, name: '运输-01', status: 'online' },
      { id: 11, name: '运输-02', status: 'online' },
      { id: 12, name: '运输-03', status: 'online' },
      { id: 13, name: '运输-04', status: 'online' },
      { id: 14, name: '运输-05', status: 'online' }
    ]
  }
])

const selectedSite = ref(null)
const selectedCamera = ref(null)
const layout = ref('single') // single, grid, fullscreen
const isRecording = ref(false)
const recordingLoading = ref(false)

// 树形数据配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 计算属性
const treeData = computed(() => {
  return sites.value.map(site => ({
    id: `site-${site.id}`,
    name: site.name,
    type: 'site',
    status: site.status,
    children: site.cameras.map(camera => ({
      id: `camera-${camera.id}`,
      name: camera.name,
      type: 'camera',
      status: camera.status,
      cameraId: camera.id,
      siteId: site.id
    }))
  }))
})

const layoutClass = computed(() => {
  return {
    'layout-single': layout.value === 'single',
    'layout-grid': layout.value === 'grid',
    'layout-fullscreen': layout.value === 'fullscreen'
  }
})

const onlineDevices = computed(() => {
  return sites.value.reduce((count, site) => {
    return count + site.cameras.filter(camera => camera.status === 'online').length
  }, 0)
})

const totalDevices = computed(() => {
  return sites.value.reduce((count, site) => count + site.cameraCount, 0)
})

const storageUsage = ref(65)

// 方法
const handleNodeClick = (data) => {
  if (data.type === 'site') {
    // 点击站点，切换到网格模式显示该站点的所有摄像头
    selectedSite.value = sites.value.find(site => `site-${site.id}` === data.id)
    selectedCamera.value = null
    layout.value = 'grid'
  } else if (data.type === 'camera') {
    // 点击摄像头，切换到单屏模式显示该摄像头
    const site = sites.value.find(site => site.id === data.siteId)
    const camera = site.cameras.find(camera => camera.id === data.cameraId)
    selectedSite.value = site
    selectedCamera.value = camera
    layout.value = 'single'
  }
}

const selectCamera = (camera) => {
  selectedCamera.value = camera
  layout.value = 'single'
}

const switchLayout = (newLayout) => {
  layout.value = newLayout
}

const ptzControl = (direction) => {
  console.log('PTZ控制:', direction, '摄像头:', selectedCamera.value?.name)
  // 这里可以添加实际的PTZ控制逻辑
}

const zoomControl = (action) => {
  console.log('缩放控制:', action, '摄像头:', selectedCamera.value?.name)
  // 这里可以添加实际的缩放控制逻辑
}

const toggleRecording = async () => {
  recordingLoading.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  isRecording.value = !isRecording.value
  recordingLoading.value = false
}

const takeSnapshot = () => {
  console.log('截图', '摄像头:', selectedCamera.value?.name)
  // 这里可以添加截图逻辑
}

const refreshSites = () => {
  console.log('刷新站点列表')
  // 这里可以添加刷新逻辑
}

const openAlarmSettings = () => {
  console.log('打开告警设置')
}

const openHistory = () => {
  console.log('打开历史回放')
}

const exportData = () => {
  console.log('导出数据')
}

// 生命周期
onMounted(() => {
  // 默认选择第一个站点的第一个摄像头
  if (sites.value.length > 0 && sites.value[0].cameras.length > 0) {
    selectedSite.value = sites.value[0]
    selectedCamera.value = sites.value[0].cameras[0]
  }
})
</script>

<style scoped>
.monitor-container {
  display: flex;
  height: calc(100vh - 120px);
  gap: 16px;
  background-color: #f5f7fa;
}

.site-list-panel,
.monitor-preview-panel,
.control-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.site-list-panel {
  width: 300px;
  flex-shrink: 0;
}

.monitor-preview-panel {
  flex: 1;
  min-width: 0;
}

.control-panel {
  width: 320px;
  flex-shrink: 0;
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* 树形结构样式 */
.site-tree {
  padding: 16px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.monitor-tree {
  background: transparent;
}

.monitor-tree :deep(.el-tree-node__content) {
  height: 40px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.monitor-tree :deep(.el-tree-node__content:hover) {
  background-color: #f0f9ff;
}

.monitor-tree :deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.tree-node {
  width: 100%;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.node-icon {
  font-size: 16px;
  color: #409eff;
}

.node-label {
  flex: 1;
  font-size: 14px;
}

.node-status {
  margin-left: auto;
}

/* 监控预览样式 */
.preview-container {
  padding: 16px;
  height: calc(100vh - 200px);
  overflow-y: auto;
}

.layout-single .camera-preview.single {
  width: 100%;
  height: 100%;
}

.layout-fullscreen .camera-preview.fullscreen {
  width: 100%;
  height: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.camera-preview {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  transition: all 0.3s ease;
}

.camera-preview.grid {
  cursor: pointer;
}

.camera-preview.grid:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.camera-preview.grid.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.camera-header {
  padding: 12px 16px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.camera-name {
  font-weight: 600;
  color: #303133;
}

.video-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.layout-single .video-container,
.layout-fullscreen .video-container {
  height: calc(100vh - 300px);
}

.video-placeholder {
  text-align: center;
  color: #909399;
}

.video-placeholder p {
  margin: 8px 0 0 0;
}

.camera-title {
  font-size: 18px;
  font-weight: 600;
  margin: 16px 0 8px 0;
}

.video-status {
  font-size: 14px;
  color: #67c23a;
  margin-bottom: 16px;
}

.video-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #c0c4cc;
}

.empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* 控制面板样式 */
.control-section {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.control-section:last-child {
  border-bottom: none;
}

.control-section h4 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ptz-controls {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.ptz-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ptz-row {
  display: flex;
  gap: 8px;
}

.ptz-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.zoom-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  color: #606266;
  font-size: 14px;
}

.status-value {
  font-weight: 600;
  color: #303133;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .monitor-container {
    flex-direction: column;
    height: auto;
  }
  
  .site-list-panel,
  .control-panel {
    width: 100%;
  }
  
  .preview-container {
    height: 400px;
  }
}
</style> 